<template>
  <view v-show="hasAward" class="award-give">
    <AtCurtain :is-opened="show" :on-close="onClose">
      <view class="award-give__background" :class="type">
        <view class="award-give__background--head">{{ awardText.title }}</view>
        <view v-if="!isComposeFlower" class="award-give__background--text">
          {{ awardData.content.show_title }}
          <view v-if="double" class="sub">获取{{ awardData.content.petal_num }}片花瓣</view>
        </view>
        <!-- 普通类型奖励 -->
        <view v-if="!isComposeFlower" class="award-give__background--image-group" :class="{ double }">
          <view class="award-give__background--image">
            <image :src="
                awardData.type === 'achieve'
                  ? awardData.content.achieve_img || imgGather.PETAL_ICON
                  : imgGather.PETAL_ICON
              " />
          </view>
          <view v-if="double" class="award-give__background--image">
            <image :src="imgGather.PETAL_ICON" />
          </view>
        </view>
        <!-- 花瓣合成 -->
        <view v-else>
          <view class="award-give__background--image">
            <image :src="imgGather.FLOWER_ICON" />
          </view>
          <view class="compose-flower--flower-num">+{{ awardText.flowerNum }}</view>
          <view class="compose-flower--flower-info" v-html="composeFlowersText"></view>
        </view>

        <view v-if="!isComposeFlower" class="award-give__download" :hover-class="time">秒后自动关闭弹窗</view>

        <image class="award-give__close" :src="imgGather.AWARD_CLOSE_ICON" @tap="
            () => {
              onClose();
            }
          " />
      </view>
    </AtCurtain>
  </view>
</template>

<script lang="ts">
import { AtCurtain } from "taro-ui-vue";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { getBounced } from "_api/clock-in";
import {
  POPUP_CLOSE_TIME,
  PETAL_ICON,
  AWARD_CLOSE_ICON,
  DOUBLE_AWARD_BGI,
  NORMAL_AWARDS_TYPE,
  COMPOSE_FLOWER_AWARDS_TYPE,
  FLOWER_ICON,
} from "@/config/component-config/award-give";

interface AwardText {
  text: string;
  subText?: string;
}
@Component({
  components: {
    AtCurtain,
  },
})
export default class AwardGive extends Vue {
  /* 临时图片 */
  imgGather = {
    PETAL_ICON,
    AWARD_CLOSE_ICON,
    DOUBLE_AWARD_BGI,
    FLOWER_ICON,
  };
  /* 定时器 */
  timer = null;
  /* 倒计时 */
  time: number = POPUP_CLOSE_TIME;
  /* 是否有两个奖励 */
  double: boolean = false;
  /* 奖励数据 */
  awardData = {
    content: {
      petal_num: 0,
      show_title: "",
    },
  };
  /* 存在奖励 */
  hasAward: boolean = false;
  /* modalClass */
  modalClass = "";
  /* 奖励列表 */
  awardList = [];

  /* 弹窗类型 是合成花瓣 */
  get isComposeFlower() {
    return this.type === COMPOSE_FLOWER_AWARDS_TYPE;
  }
  get composeFlowersText() {
    if (!this.awardText.consumeNum) return "";
    return `共消耗${this.awardText.consumeNum}花瓣合成了<text>${this.awardText.flowerNum}</text>朵花`;
  }

  /* 弹窗类型 */
  /* 目前有普通和合成花瓣类型（ compose-flower） */
  @Prop({ default: NORMAL_AWARDS_TYPE }) type: string;
  /* 弹窗显示参数 */
  @Prop({ default: false }) show: boolean;

  /* 页面位置 */
  /* 
    theme_detail：主题详情
    index：首页
    group_detail：团详情
    my_petal：我的花瓣
    activity_or_theme_detail：主题详情或者活动详情
    exchange_mall：兑换商城
   */
  @Prop({ default: "", required: true }) position: string;

  /* 显示文案 */
  @Prop({
    default: () => {
      return {
        text: "",
        subText: "",
        title: "恭喜你",
        flowerNum: 0,
        consumeNum: 0,
        /* title: "花瓣合成成功", */
      };
    },
  })
  awardText: AwardText;

  /* 监听显示 */
  @Watch("show")
  changeShow(n, o) {
    this.hasAward = this.isComposeFlower;
    if (n && this.type === NORMAL_AWARDS_TYPE) {
      this.getAward();
    } else {
      this.clearTimer();
      this.awardData = {
        content: {
          petal_num: 0,
          show_title: "",
        },
      };
    }
  }
  created() {}

  /* 获取奖励信息 */
  async getAward() {
    const { data } = await getBounced({ position: this.position }).catch(
      (e) => {
        return { data: {} };
      }
    );
    if (data.length) {
      this.awardList = data;
      this.awardList.length &&
        (this.awardData = this.awardList.splice(0, 1)[0]);
      this.double = !!this.awardData.content.petal_num;
      this.hasAward = true;
      this.openTimer();
    } else {
      this.onClose();
    }
  }
  /* 开启定时器 */
  openTimer() {
    this.time = POPUP_CLOSE_TIME;
    this.timer = setInterval(() => {
      if (this.time <= 1) {
        this.clearTimer();
        this.onClose();
      }
      this.time--;
    }, 1000);
  }

  /* 清除定时器 */
  clearTimer() {
    clearInterval(this.timer);
    this.timer = null;
    this.time = POPUP_CLOSE_TIME;
  }

  /* 关闭弹窗 */
  onClose() {
    this.hasAward = false;
    if (this.isComposeFlower) {
      this.$emit("changeType", NORMAL_AWARDS_TYPE);
      this.getAward();
      return;
    }
    /* 清除定时器 */
    this.clearTimer();
    if (this.awardList.length) {
      this.awardData = this.awardList.splice(0, 1)[0];
      this.double = !!this.awardData.content.petal_num;
      /* 模拟重新弹窗 */
      setTimeout(() => {
        this.hasAward = true;
        this.openTimer();
      }, 200);
    } else {
      /* 弹窗全部执行完成后改变状态 抛出事件 */
      this.$emit("update:show", false);
      this.$emit("onClose", this.awardData);
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
@import "@/assets/scss/theme.scss";
$awardBg : 'https://cdn-habitv5.xaxthk.cn/font-static/award-give(1).png';
$awardHeadBg : 'https://cdn-habitv5.xaxthk.cn/font-static/award-give (2).png';
$awardDobBg : 'https://cdn-habitv5.xaxthk.cn/font-static/award-give (3).png';

.award-give {
  text-align: center;
  .at-curtain {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  .at-curtain__btn-close {
    display: none !important;
  }
  &__background {
    padding-top: 116px;
    text-align: center;
    display: inline-block;
    width: 578px;
    height: 558px;
    @include setBgi($awardBg);
    &--head {
      width: 420px;
      height: 120px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -36px;
      color: #a13d0f;
      font-size: 40px;
      font-weight: bold;
      /* letter-spacing: 10px; */
      line-height: 90px;
      @include setBgi($awardHeadBg);
    }
    &--text {
      color: $text-color-primary;
      font-size: 32px;
      font-weight: bold;
      padding: 0 30px;
      .sub {
        margin-top: 4px;
        color: #606266;
        font-weight: normal;
      }
    }
    &--image-group {
      margin-top: 32px;
      display: inline-block;
    }
    &--image {
      width: 320px;
      height: 320px;
      > image {
        width: 100%;
        height: 100%;
      }
    }
    .double {
      padding: 0 48px;
      margin-top: 48px;
      @include normal-flex(space-between);
      .award-give__background--image {
        width: 224px;
        height: 224px;
        @include setBgi($awardDobBg);
        @include normal-flex;
        > image {
          width: 160px;
          height: 160px;
        }
      }
    }
  }
  .compose-flower {
    height: 598px;
    padding-top: 84px;
    text-align: center;
    .award-give__background--head {
      letter-spacing: normal;
    }
    .award-give__background--image {
      display: inline-block;
      > image {
        width: 320px;
        height: 320px;
      }
    }
    &--flower-num {
      font-size: 48px;
      color: $text-color-primary;
      margin-bottom: 24px;
      font-weight: bold;
    }
    &--flower-info {
      font-size: 28px;
      color: #606266;
      > text {
        color: #ff8000;
      }
    }
    .award-give__close {
      bottom: -96px;
    }
  }
  &__download {
    position: absolute;
    bottom: -76px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: #fff;
    font-weight: bold;
  }
  &__download::before {
    content: attr(hover-class);
  }
  &__close {
    position: absolute;
    bottom: -184px;
    height: 48px;
    width: 48px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
